<script setup lang='ts'>
import { ref, reactive } from "vue"
import { storeToRefs } from "pinia"
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from "element-plus"
import { Search, Minus, Plus } from '@element-plus/icons-vue'
import { useEnumStore } from "@/store/enumeration"
import { dictAddPost } from "@/api/operationManagement"
import useInstance from '@/hooks/useInstance';
import { envSceneStore } from "./envAndScene"
import { useComListData } from "@/store/list"
const { tableProp, listSearch, pageParams, addSonEnvironmentRef } = storeToRefs(envSceneStore())
const {getEnvList} = useComListData()
const { getDate1Env, handPageEnv, delBtnEnv } = envSceneStore()
const { templateType } = storeToRefs(useEnumStore())
defineOptions({
    name: 'addEnv'
})
const { global } = useInstance();

const dialogBasic = ref({
    title: "环境管理",
    visible: false,
    width: 1200,
    height: 600,
    showFooter: false,
    marginTop: "10vh",
})


const environmentFormRef = ref<FormInstance>()
const addSupply = reactive<any>({
    dictItemName: null,
    dictCode: 'ENVIRONMENT'
})

const rules = reactive<FormRules>({
    dictItemName: [
        {
            required: true,
            trigger: 'blur',
            message: "请输入环境名称"
        }
    ],
})
/* son */
const sonDialog = ref(false)
const sonConfirm = async () => {
    // 发送请求
    await environmentFormRef.value?.validate(async isOk => {
        if (isOk) {
            try {

                const res = await dictAddPost({ ...addSupply })
                if (res.code == 20000) {
                    ElMessage({
                        message: addSupply?.id ? "环境管理字典编辑成功" : "环境管理字典新增成功",
                        type: "success"
                    })
                    if(addSupply.id){
                        getDate1Env('search')
                    }else{

                        getDate1Env('reset')
                    }
                    sonCancel()
                    getEnvList()
                }
            } catch (error) {
                ElMessage({
                    message: addSupply?.id ? "环境管理字典编辑失败 请重试！" : "环境管理字典新增失败 请重试！",
                    type: "warning"
                })
            }
        }
    })
}
const sonCancel = () => {
    Object.keys(addSupply).forEach((item:any)=>delete addSupply[item])
    sonDialog.value = false
    environmentFormRef.value?.resetFields()
}
const sonEnvTitle = ref('新建环境')
const envAdd = (type: string, row?: any) => {
    global.$resetForm(environmentFormRef.value, addSupply)
      addSupply.dictCode='ENVIRONMENT'
      addSupply.dictItemName=null
    if (type == 'add') {
        sonEnvTitle.value = '新建环境'
    } else {
        global.$objCopy(addSupply, row)
        sonEnvTitle.value = '编辑环境'
    }
    sonDialog.value = true
}
//显示弹框
const show = async (type: string, row?: any) => {
    await getDate1Env('search')
    dialogBasic.value.visible = true
}
const onClose = () => {
    dialogBasic.value.visible = false
    listSearch.value.pageNum = 1
    listSearch.value.pageSize = 20
}
const onConfirm = async () => {
    dialogBasic.value.visible = false
}

defineExpose({
    show
})
</script>

<template>
    <SysDialog :title="dialogBasic.title" :width="dialogBasic.width" :height="dialogBasic.height"
        :show-footer="dialogBasic.showFooter" :visible="dialogBasic.visible" :margin-top="dialogBasic.marginTop"
        @on-close="onClose" @on-confirm="onConfirm">
        <template v-slot:content>
            <div class="demo-ruleForm">
                <div style="display: flex;justify-content: flex-end;margin: 5px;">
                <el-button type="primary" @click="envAdd('add')">新增</el-button>
            </div>
            <!-- table -->
            <OnlyTable class="card-2" :tableProps="tableProp" :pageTotal="pageParams.total" @get-page="handPageEnv"
                :tableData="pageParams.tableData" :tableHeight="pageParams.tableHeight" :loading="pageParams.loadIng">
                <template #handle="scope">
                    <el-button type="primary" size="small" link @click="envAdd('edit', scope.row)"
                     >编辑</el-button>
                    <el-button type="danger" size="small" link 
                        @click="delBtnEnv(1,scope.row)">删除</el-button>
                </template>
            </OnlyTable>
            </div>
          
        </template>
        <!-- dialog -->
    </SysDialog>
    <el-dialog v-model="sonDialog"  width="500" :title="sonEnvTitle" append-to-body>
        <el-form ref="environmentFormRef" :model="addSupply" :rules="rules" label-width="120px" class="demo1-ruleForm"
            status-icon>
            <el-form-item label="环境名称" prop="dictItemName">
                <NormalInput v-model:model-value="addSupply.dictItemName"></NormalInput>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="sonCancel">取消</el-button>
                <el-button type="primary" @click="sonConfirm">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style lang='scss' scoped>
.demo-ruleForm {
    height: 600px;
    overflow: auto;
}
</style>
